<template>
    <ContentWrap>
        <CardTitle title="Upload 组件使用" />
        <code class="code-block mt-20px" >
            &lt;UploadFile v-model="fileList" @upload-success="handleSuccess" /&gt;<br/>
            &lt;UploadImg v-model="imageUrl" :limit="1" /&gt;<br/>
            &lt;UploadImgs v-model="imageList" :limit="5" /&gt;
        </code>
        <CardTitle title="Upload 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const fileList = ref([])
const imageUrl = ref('')
const imageList = ref([])

const handleSuccess = (file: any) => {
    console.log('上传成功:', file)
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Upload 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>modelValue</td> 
                    <td>Array/String</td>
                    <td>-</td>
                    <td>绑定值</td>
                </tr>
                <tr>
                    <td>limit</td>
                    <td>Number</td>
                    <td>1</td>
                    <td>最大允许上传个数</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>Number</td>
                    <td>5</td>
                    <td>大小限制(MB)</td>
                </tr>
                <tr>
                    <td>fileType</td>
                    <td>Array</td>
                    <td>['jpg', 'png', 'gif']</td>
                    <td>文件类型限制</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否禁用</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Upload 事件" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>upload-success</td> 
                    <td>file: Object</td>
                    <td>文件上传成功时的钩子</td>
                </tr>
                <tr>
                    <td>upload-error</td>
                    <td>error: Object</td>
                    <td>文件上传失败时的钩子</td>
                </tr>
                <tr>
                    <td>before-upload</td>
                    <td>file: Object</td>
                    <td>上传文件之前的钩子</td>
                </tr>
                <tr>
                    <td>remove</td>
                    <td>file: Object</td>
                    <td>文件列表移除文件时的钩子</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Upload 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>文件上传</h4>
                <UploadFile 
                    v-model="fileList1" 
                    :limit="3"
                    :size="10"
                    :fileType="['pdf', 'doc', 'docx', 'txt']"
                    @upload-success="handleFileSuccess"
                    @upload-error="handleFileError"
                />
                <p class="demo-result">文件列表: {{ fileList1 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>单图上传</h4>
                <UploadImg 
                    v-model="imageUrl1"
                    :limit="1"
                    :size="2"
                    @upload-success="handleImageSuccess"
                />
                <p class="demo-result">图片URL: {{ imageUrl1 }}</p>
                <div v-if="imageUrl1" class="preview-image">
                    <img :src="imageUrl1" alt="预览图片" />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>多图上传</h4>
                <UploadImgs 
                    v-model="imageList1"
                    :limit="5"
                    :size="3"
                    @upload-success="handleImagesSuccess"
                />
                <p class="demo-result">图片列表 ({{ imageList1.length }} 张): {{ imageList1 }}</p>
                <div v-if="imageList1.length" class="preview-images">
                    <img 
                        v-for="(image, index) in imageList1" 
                        :key="index"
                        :src="image" 
                        alt="预览图片"
                    />
                </div>
            </div>
            
            <div class="demo-section">
                <h4>禁用状态</h4>
                <div class="disabled-demo">
                    <EButton @click="toggleDisabled">
                        {{ disabled ? '启用' : '禁用' }}上传
                    </EButton>
                    <UploadFile 
                        v-model="fileList2" 
                        :disabled="disabled"
                        :limit="2"
                    />
                    <UploadImg 
                        v-model="imageUrl2"
                        :disabled="disabled"
                    />
                </div>
                <p class="demo-result">禁用状态: {{ disabled ? '已禁用' : '已启用' }}</p>
            </div>
            
            <div class="demo-section">
                <h4>自定义限制</h4>
                <div class="custom-demo">
                    <div class="custom-item">
                        <h5>只允许图片 (最大1MB)</h5>
                        <UploadImgs 
                            v-model="customImages1"
                            :limit="3"
                            :size="1"
                            :fileType="['jpg', 'jpeg', 'png']"
                        />
                    </div>
                    <div class="custom-item">
                        <h5>只允许文档 (最大5MB)</h5>
                        <UploadFile 
                            v-model="customFiles1"
                            :limit="2"
                            :size="5"
                            :fileType="['pdf', 'doc', 'docx', 'xls', 'xlsx']"
                        />
                    </div>
                </div>
            </div>
            
            <div class="demo-section">
                <h4>上传进度和状态</h4>
                <UploadFile 
                    v-model="fileList3" 
                    :limit="5"
                    @upload-success="handleProgressSuccess"
                    @upload-error="handleProgressError"
                    @before-upload="handleBeforeUpload"
                />
                <div class="upload-status">
                    <p class="demo-result">上传状态: {{ uploadStatus }}</p>
                    <p class="demo-result">成功上传: {{ successCount }} 个</p>
                    <p class="demo-result">失败上传: {{ errorCount }} 个</p>
                </div>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 基础示例
const fileList1 = ref([])
const imageUrl1 = ref('')
const imageList1 = ref([])

// 禁用示例
const fileList2 = ref([])
const imageUrl2 = ref('')
const disabled = ref(false)

// 自定义限制示例
const customImages1 = ref([])
const customFiles1 = ref([])

// 进度状态示例
const fileList3 = ref([])
const uploadStatus = ref('等待上传')
const successCount = ref(0)
const errorCount = ref(0)

const handleFileSuccess = (file: any) => {
    console.log('文件上传成功:', file)
}

const handleFileError = (error: any) => {
    console.log('文件上传失败:', error)
}

const handleImageSuccess = (file: any) => {
    console.log('图片上传成功:', file)
}

const handleImagesSuccess = (file: any) => {
    console.log('多图上传成功:', file)
}

const toggleDisabled = () => {
    disabled.value = !disabled.value
}

const handleProgressSuccess = (file: any) => {
    successCount.value++
    uploadStatus.value = '上传成功'
    console.log('进度上传成功:', file)
    
    setTimeout(() => {
        uploadStatus.value = '等待上传'
    }, 2000)
}

const handleProgressError = (error: any) => {
    errorCount.value++
    uploadStatus.value = '上传失败'
    console.log('进度上传失败:', error)
    
    setTimeout(() => {
        uploadStatus.value = '等待上传'
    }, 2000)
}

const handleBeforeUpload = (file: any) => {
    uploadStatus.value = '上传中...'
    console.log('准备上传:', file)
    return true
}
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    h5 {
        margin: 0 0 10px 0;
        color: #666;
        font-size: 14px;
        font-weight: 500;
    }
    
    .demo-result {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
        word-break: break-all;
    }
}

.preview-image {
    margin-top: 15px;
    
    img {
        max-width: 200px;
        max-height: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
}

.preview-images {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    
    img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
}

.disabled-demo {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.custom-demo {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .custom-item {
        padding: 15px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        background: #f8f9fa;
    }
}

.upload-status {
    margin-top: 15px;
    padding: 15px;
    background: #f0f0f0;
    border-radius: 4px;
}
</style> 